$card-border-color: var(--card-block-border-color, #F8F8F8);
$card-bg-color: var(--card-bg-color, #F8F8F8);
$card-name-color: var(--card-name-color, #666666);
$card-count-color: var(--card-desc-color, #222222);
$card-count-font-size: var(--card-count-font-size, 19px);
$card-count-text-align: var(--card-count-text-align, 'unset');

.card-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 106px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: $card-bg-color;
    border-radius: 8px;
    border: 1px solid $card-border-color;

    .card-title-block {
        display: flex;
        align-items: center;
        margin-bottom: 6px;

        .card-name {
            font-size: 14px;
            color: $card-name-color;
            line-height: 18px;
        }

        .icon-help-block {
            margin-left: 4px;
            width: 20px;
            height: 20px;
            padding: 3px;
            box-sizing: border-box;

            .icon-help {
                width: 14px;
                height: 14px;
            }
        }

        .popover-cus-block {
            padding: 8px;
            box-sizing: border-box;
            font-size: 13px;
            color: #F5F5F5;
            line-height: 17px;
        }
    }

    .card-count-block {
        margin-bottom: 4px;
        font-weight: 600;
        font-size: $card-count-font-size;
        color: $card-count-color;
        line-height: 26px;
        font-family: "Barlow";
        font-size: 22px;
        text-align: $card-count-text-align;
    }

    .card-momRatio-block {
        display: flex;
        align-items: center;

        .pre-count-block,
        .mom-ratio-block {
            flex: 1;
            font-size: 13px;
            color: #999999;
            line-height: 18px;
            text-align: $card-count-text-align;
        }

        .pre-count-block {
            flex: 1;
            // margin-right: 24px;
        }

        .mom-ratio-block {
            .icon-up {
                margin-right: 1px;
                width: 10px;
                height: 10px;
            }

            .ratio-text {
                color: #999999;
            }

            .ratio-text-up {
                color: #ee3c20;
            }

            .ratio-text-down {
                color: #2bc383;
            }
        }
    }
}


:global(.mobile) {
    .card-block {
        display: block;
        height: auto;
        padding: px2vw(8px) px2vw(10px);
        border-radius: px2vw(8px);

        .card-title-block {
            margin-bottom: px2vw(4px);

            .card-name {
                font-size: px2vw(14px);
                line-height: px2vw(18px);
            }

            .icon-help-block {
                margin-left: px2vw(4px);
                width: px2vw(20px);
                height: px2vw(20px);
                padding: px2vw(3px);

                .icon-help {
                    width: px2vw(14px);
                    height: px2vw(14px);
                }
            }

            .popover-cus-block {
                padding: px2vw(8px);
                font-size: px2vw(13px);
                line-height: px2vw(17px);
            }
        }

        .card-count-block {
            font-size: $card-count-font-size;
            margin-bottom: px2vw(4px);
            line-height: px2vw(26px);
        }

        .card-momRatio-block {

            .pre-count-block,
            .mom-ratio-block {
                font-size: px2vw(13px);
                line-height: px2vw(18px);
            }

            .pre-count-block {
                margin-right: px2vw(24px);
            }

            .mom-ratio-block {
                .icon-up {
                    margin-right: px2vw(1px);
                    width: px2vw(10px);
                    height: px2vw(10px);
                }
            }
        }
    }
}